<template>
  <div>
    <div>
      <van-swipe :autoplay="3000" :show-indicators="false">
        <van-swipe-item v-for="(item, index) in images" :key="index">
          <img :src="item.image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div>
      <van-tabs>
        <van-tab
          v-for="(item, index) in titlelist"
          :key="index"
          :title="item.name"
          animated
        >
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <van-cell v-for="(item, index) in list" :key="index">
                <span class="left">
                  <img :src="item.cover" alt="" />
                </span>
                <span class="right">
                  <span class="name">
                    {{ item.name }}
                  </span>
                  <span class="stock">累计{{ item.stock }}份</span>
                  <span class="price"
                    >￥<span class="num">{{ item.price }}</span
                    ><span class="car" @click="AddListToCar(item)"
                      >加</span
                    ></span
                  >
                </span>
              </van-cell>
            </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations } from "vuex";
import { swiper, homelist } from "../../../api/api";
export default {
  data() {
    return {
      // 轮播图照片
      images: [],
      // 首页列表
      homelist: [],
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      titlelist: [
        {
          id: 1,
          name: "新晋爆款",
        },
        {
          id: 2,
          name: "每日必抢",
        },
        {
          id: 3,
          name: "水果",
        },
        {
          id: 4,
          name: "蔬菜",
        },
        {
          id: 5,
          name: "肉蛋",
        },
        {
          id: 6,
          name: "零食",
        },
      ],
    };
  },
  created() {
    this.render();
  },
  methods: {
    // ...mapMutations("car", ["addcarActions"]),
    ...mapActions("car", ["addcarActions"]),
    render() {
      swiper().then((res) => {
        this.images = res.data.data;
      });
      homelist().then((res) => {
        this.list = res.data.data.data;
      });
    },
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          //   this.list = [];
          this.refreshing = false;
        }

        // for (let i = 0; i < 1; i++) {
        //   this.list.push(this.list.length);
        // }
        this.loading = false;

        if (this.list.length >= this.list.length) {
          this.finished = true;
        }
      }, 1500);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    // 点击添加购物车执行的函数
    AddListToCar(item) {
      // console.log("购物车");
      let shop_id = item.id;
      // 添加购物车
      this.addcarActions(shop_id);
    },
  },
};
</script>

<style scoped>
img {
  width: 100%;
  height: 150px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.left img {
  width: 100px;
  height: 100px;
  float: left;
}
.right {
  display: flex;
  flex-direction: column;
  padding-left: 5px;
}
.name {
  font-weight: bold;
}
.stock {
  font-size: 10px;
  color: #ccc;
}
.price {
  color: red;
  font-size: 10px;
}
.num {
  font-size: 17px;
  font-weight: bold;
}
.car {
  float: right;
  font-size: 17px;
}
</style>